<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>智能触控板 - 固定速度1.5倍，上方水平滑动滚轮</title>
    <style>
        html, body, #touchpad {
            margin: 0; padding: 0; height: 100%;
            user-select: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
            touch-action: none;
            background: #000000;
            overflow: hidden;
        }
        #touchpad {
            position: relative;
            width: 100%;
            height: 100vh;
        }
        #speedControl {
            position: fixed;
            top: 10px;
            right: 10px;
            background: rgba(255,255,255,0.9);
            padding: 8px 12px;
            border-radius: 8px;
            font-family: sans-serif;
            color: #000;
            z-index: 9999;
            user-select: none;
        }
        #speedControl label {
            font-size: 14px;
            margin-right: 6px;
        }
        #speedValue {
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="touchpad"></div>

<!--<div id="speedControl">
    <label>移动速度倍数:</label>
    <span id="speedValue">1.5</span>x
</div>-->

<script>
    (() => {
        const touchpad = document.getElementById('touchpad');
        const speedValue = 2;

// WebSocket 连接(示例地址，替换为你实际地址)
        const ws = new WebSocket(`ws://${location.host}/touchpad`);

        const MIN_MOVE_THRESHOLD = 1;
        const MAX_CLICK_MOVE = 8;

        let touchMap = new Map();
        let touchStartInfo = new Map();

        let isTwoFingerDown = false;
        let isThreeFingerDown = false;

        let accumulatedDx = 0;
        let accumulatedDy = 0;
        let accumulatedScrollDelta = 0;

        const scrollAreaHeightRatio = 0.1;
        let touchpadWidth = touchpad.clientWidth;
        let touchpadHeight = touchpad.clientHeight;
        let scrollAreaHeight = touchpadHeight * scrollAreaHeightRatio;

// 固定速度倍数为1.5
        const speedFactor = 1.5;

// 显示固定速度值
        speedValue.textContent = speedFactor.toFixed(1);

// 发送累积的移动和滚轮数据，使用 requestAnimationFrame 同步帧率
        function sendAccumulated() {
            if (ws.readyState === WebSocket.OPEN) {
                if (accumulatedDx !== 0 || accumulatedDy !== 0) {
                    ws.send(`MOVE:${accumulatedDx},${accumulatedDy}`);
                    accumulatedDx = 0;
                    accumulatedDy = 0;
                }
                if (accumulatedScrollDelta !== 0) {
                    ws.send(`SCROLL:${accumulatedScrollDelta}`);
                    accumulatedScrollDelta = 0;
                }
            }
            requestAnimationFrame(sendAccumulated);
        }
        requestAnimationFrame(sendAccumulated);

        window.addEventListener('resize', () => {
            touchpadWidth = touchpad.clientWidth;
            touchpadHeight = touchpad.clientHeight;
            scrollAreaHeight = touchpadHeight * scrollAreaHeightRatio;
        });

        touchpad.addEventListener('touchstart', (e) => {
            touchMap.clear();
            touchStartInfo.clear();

            for (let touch of e.touches) {
                touchMap.set(touch.identifier, { x: touch.clientX, y: touch.clientY });
                touchStartInfo.set(touch.identifier, {
                    startTime: Date.now(),
                    startX: touch.clientX,
                    startY: touch.clientY
                });
            }

            // 双指按下，模拟原三指左键按下拖动
            if (e.touches.length === 2 && !isTwoFingerDown) {
                isTwoFingerDown = true;
                if(ws.readyState === WebSocket.OPEN) ws.send("LEFT_DOWN");
            }

            // 三指按下，后续用于右键点击（无拖动）
            if (e.touches.length === 3 && !isThreeFingerDown) {
                isThreeFingerDown = true;
            }
        }, { passive: true });

        touchpad.addEventListener('touchmove', (e) => {
            if (e.touches.length === 1) {
                const touch = e.touches[0];
                const prev = touchMap.get(touch.identifier);
                if (!prev) return;

                const dx = touch.clientX - prev.x;
                const dy = touch.clientY - prev.y;

                if (Math.abs(dx) < MIN_MOVE_THRESHOLD && Math.abs(dy) < MIN_MOVE_THRESHOLD) {
                    return;
                }

                if (touch.clientY < scrollAreaHeight) {
                    // 顶部10%区域：单指水平滑动模拟滚轮，不加速
                    accumulatedScrollDelta += dx;
                } else {
                    accumulatedDx += dx * speedFactor;
                    accumulatedDy += dy * speedFactor;
                }

                touchMap.set(touch.identifier, { x: touch.clientX, y: touch.clientY });
                e.preventDefault();
            }
            // 双指拖动模拟左键拖动（原三指拖动功能）
            else if (e.touches.length === 2 && isTwoFingerDown) {
                const touch = e.touches[0];
                const prev = touchMap.get(touch.identifier);
                if (!prev) return;

                const dx = touch.clientX - prev.x;
                const dy = touch.clientY - prev.y;

                if (Math.abs(dx) >= MIN_MOVE_THRESHOLD || Math.abs(dy) >= MIN_MOVE_THRESHOLD) {
                    accumulatedDx += dx * speedFactor;
                    accumulatedDy += dy * speedFactor;
                    touchMap.set(touch.identifier, { x: touch.clientX, y: touch.clientY });
                    e.preventDefault();
                }
            }
            // 三指滑动 不处理拖动，三指只是用来右键点击，不移动鼠标
        }, { passive: false });

        touchpad.addEventListener('touchend', (e) => {
            // 双指抬起，结束左键拖动
            if (e.touches.length < 2 && isTwoFingerDown) {
                isTwoFingerDown = false;
                if(ws.readyState === WebSocket.OPEN) ws.send("LEFT_UP");
            }

            // 三指抬起，触发右键点击
            if (e.touches.length < 3 && isThreeFingerDown) {
                // 仅在三指全部抬起时触发右键点击
                if (e.touches.length === 0 && e.changedTouches.length === 3) {
                    if(ws.readyState === WebSocket.OPEN) ws.send("RIGHT_CLICK");
                }
                isThreeFingerDown = false;
            }

            // 单指触摸结束时判断左键点击
            if (e.touches.length === 0) {
                for (let touch of e.changedTouches) {
                    const info = touchStartInfo.get(touch.identifier);
                    if (!info) continue;

                    const duration = Date.now() - info.startTime;
                    const moveX = Math.abs(touch.clientX - info.startX);
                    const moveY = Math.abs(touch.clientY - info.startY);

                    if (duration < 200 && moveX < MAX_CLICK_MOVE && moveY < MAX_CLICK_MOVE) {
                        // 只有一根手指结束时触发左键点击
                        if (e.changedTouches.length === 1) {
                            if(ws.readyState === WebSocket.OPEN) ws.send("LEFT_CLICK");
                        }
                        // 原先双指点击触发右键点击的功能移除，因为三指用于右键点击
                    }
                }
            }

            for (let touch of e.changedTouches) {
                touchMap.delete(touch.identifier);
                touchStartInfo.delete(touch.identifier);
            }
        }, { passive: true });
    })();
</script>
</body>
</html>
